<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Basic Layout - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="js/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="js/themes/icon.css">
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
</head>
<body>

	<div class="easyui-layout" data-options="fit:true">
		<div data-options="region:'north'" style="height:50px">


					<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">Add</a>


		</div>

		<div data-options="region:'south',split:true" style="height:50px;"></div>
		<div data-options="region:'west',split:true" title="West" style="width:200px;">

                <div class="easyui-accordion" data-options="fit:true,border:false,onSelect:function(title,index){ console.log(title)}">
                        <div title="功能模块" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">
                            <ul class="myMenu">
                                <li>
                                    <a href="javascript:void(0)" data-link="./components/user.html">用户管理</a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)" data-link="./components/cate.html">分类管理</a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)" data-link="./components/news.html">新闻管理</a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)" data-link="./components/comment.html">评论管理</a>
                                </li>
                            </ul>
                        </div>
                        <div title="Help" data-options="iconCls:'icon-help'" style="padding:10px;">
                            <p>The accordion allows you to provide multiple panels and display one or more at a time. Each panel has
                                built-in support for expanding and collapsing. Clicking on a panel header to expand or collapse that
                                panel body. The panel content can be loaded via ajax by specifying a 'href' property. Users can define
                                a panel to be selected. If it is not specified, then the first panel is taken by default.</p>
                        </div>
        
                    </div>


		</div>
		<div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">
                <div id="tt" class="easyui-tabs"></div>
		</div>
	</div>

</body>
</html>

<script>
        $('.myMenu a').click(function () {
            var title = $(this).text();
            var url = $(this).attr('data-link');

            if ($('#tt').tabs('exists', title)) {
            $('#tt').tabs('select', title);
        } else {
           
            $('#tt').tabs('add', {
                title: title,
                content: '<iframe scrolling="auto" frameborder="0" style="width:100%;height:600px" src="' +
                url + '"></iframe>',
                closable: true
            });
        }
    
        })
    
    </script>